import React, {Component} from 'react'
import {Form,Input,Select} from 'antd'
import PropTypes from 'prop-types'
const Option = Select.Option

class AddForm extends Component {

  static propTypes = {
    categories: PropTypes.array.isRequired,
    parentId: PropTypes.string.isRequired,
    setForm: PropTypes.func.isRequired
  }

  componentWillMount(){
    this.props.setForm(this.props.form)
  }

  render () {
    const {getFieldDecorator} = this.props.form
    const {categories,parentId} = this.props
    return (
      <Form>
        <Form.Item>
          {
            getFieldDecorator('parentId',{
              initialValue: parentId,
              rules:[{}]
            })(
              <Select>
                <Option value='0'>CategoryClass1</Option>
                {
                    categories.map(c => <Option key={c._id}>{c.name}</Option>)
                }
              </Select>
            )
          }
        </Form.Item>
        <Form.Item>
          {
            getFieldDecorator('categoryName', {
              initialValue: '',
            })(
              <Input type='text' placeholder='EnterCategoryName'/>
            )
          }
        </Form.Item>
      </Form>
    )
  }
}

export default Form.create()(AddForm)